// 类型注解

// 基本类型的定义
let num: number = 1000
let str: string = 'string'
let flag: boolean = true

// undefined 和 null 是所以类型的子类型
// undefined 和 null  是同级 可以交换使用

let nulls: undefined = null

// any  可以代表任意类型
let res: any = 1000

//  | 或者 
let res2: number | string = 8888

// 接口 interface  ==> 用来约束对象类型

// ?  非必传
interface IUserInfo {
    userName: string,
    passWord: number,
    rem?: boolean
}
 
let userInfo: IUserInfo = {
    userName: "张三",
    passWord: 100
}


// 枚举  ==>  在规定的范围内选出其中的一项
// 枚举写法1 
// enum Direction {
//     Top = "top",
//     Down = "down",
//     Left = "left",
//     Right = "right"
// }
// Direction.Top

// enum Direction {
//     Top,
//     Down,
//     Left,
//     Right
// }
//  Direction.Down  得到下标


// 定义数组
// 第一种方式
let arr: string[] = ['1', '2', '3']

// 第二种方式
let arr1: Array<number> = [1, 2, 3]

// 元组
let arr2: [number, string] = [11, '22']



// 泛型  
// void 函数设置空返回值

// 
// function fn(num: any): any {
//     return num
// }

// 单个泛型
// function fn<T>(num: T): T {
//     return num
// }
// // fn('100')

// fn(true)

// 多个泛型
// function fn<ABC, D>(num: [ABC, D]): [ABC, D] {
//     return [num[0
//     ], num[1]]
// }
// fn([11, 22])

interface ILen {
    length?: number,
    push?: any
}

// 约束性泛型
function fn<T extends ILen>(arr: T) {
    // console.log(arr.length)
    arr.push(6)
}

let list: number[] = [1, 2, 3, 4, 5]

fn(list)

// 通过下面命令生成react + ts 的cli
// npx create-react-app react-app --template typescript










